<template>
  <view class="container">
    <!-- 顶部用户信息区域 -->
    <view class="user-info">
      <view class="avatar-placeholder" @click="handleLogin"></view>
      <view class="user-details">
        <text class="username">{{ userInfo.nickname || '未登录' }}</text>
        <text v-if="userInfo.id" class="userid">ID: {{ userInfo.id }}</text>
      </view>
      <view class="edit-icon">
        <uni-icons type="compose" size="24" color="#ffffff"></uni-icons>
      </view>
    </view>

    <!-- 我的订单区域 -->
    <view class="section">
      <view class="section-header">
        <text class="section-title">我的订单</text>
      </view>
      <view class="order-icons" @click="test">
        <view class="order-item">
          <uni-icons type="shop-filled" size="32" color="#a1e1e1"></uni-icons>
          <text class="order-text">订单</text>
        </view>
      </view>
    </view>

    <!-- 我的工具区域 -->
    <view class="section">
      <view class="section-header">
        <text class="section-title">我的工具</text>
      </view>
      <view class="tool-grid">
        <!-- <view class="tool-item">
          <uni-icons type="list" size="32" color="#a1e1e1"></uni-icons>
          <text class="tool-text">发票管理</text>
        </view> -->
        <view class="tool-item" @click="handleConsult">
          <uni-icons type="headphones" size="32" color="#a1e1e1"></uni-icons>
          <text class="tool-text">联系客服</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { login } from '@/api/login'
import { USER_INFO } from '@/const/storage'

export default {
  data() {
    return {
      userInfo: {}
    }
  },
  onShow() {
    this.userInfo = uni.getStorageSync(USER_INFO) || {}
  },
  methods: {
    handleConsult(item) {
      // 处理咨询点击
      console.log('咨询订单', item);
      uni.makePhoneCall({
        phoneNumber: '010-52335555'
      });
    },
    async handleLogin() {
      const res = await uni.login({
        provider: 'weixin',
      })
      const loginRes = res.filter(Boolean)[0]
      const resp = await login(loginRes.code)
      uni.setStorageSync(USER_INFO, resp.data)
      this.userInfo = resp.data
    }
  }
}
</script>

<style>
/* 页面容器 */
.container {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding: 0;
}

/* 用户信息区域 */
.user-info {
  background: linear-gradient(to right, #a1e1e1, #b8e9e9);
  padding: 40rpx 30rpx;
  display: flex;
  align-items: center;
  position: relative;
}

.avatar-placeholder {
  width: 100rpx;
  height: 100rpx;
  background-color: #ffffff;
  border-radius: 50%;
  margin-right: 20rpx;
}

.user-details {
  flex: 1;
}

.username {
  font-size: 32rpx;
  font-weight: bold;
  display: block;
  margin-bottom: 8rpx;
}

.userid {
  font-size: 26rpx;
  color: #666666;
}

.edit-icon {
  position: absolute;
  right: 30rpx;
}

/* 分区样式 */
.section {
  background-color: #ffffff;
  border-radius: 12rpx;
  margin: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  padding: 0 30rpx;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
}

.section-title {
  font-size: 28rpx;
  font-weight: bold;
}

/* 订单图标区域 - 靠左显示 */
.order-icons {
  display: flex;
  padding: 30rpx 0;
}

.order-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* 改为靠左对齐 */
  padding-left: 20rpx;
  /* 添加一些内边距 */
}

.order-text {
  font-size: 28rpx;
  /* 增大文字大小 */
  color: #333333;
  margin-top: 10rpx;
}

/* 工具网格 */
.tool-grid {
  display: flex;
  flex-wrap: wrap;
  padding: 30rpx 0;
}

.tool-item {
  /* width: 50%;  改为两列布局 */
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 改为靠左对齐 */
  padding: 20rpx;
  /* 添加内边距 */
  box-sizing: border-box;
}

.tool-text {
  font-size: 28rpx;
  /* 增大文字大小 */
  color: #333333;
  margin-top: 10rpx;
}
</style>